<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>

		<!-- 表格高亮 -->
		<style type="text/css">
			tr td,
			tr th {

				width: 200px;
				line-height: 30px;
				text-align: center;
			}
		</style>


		<!--css-->
		<!-- 表格 -->
		<style type="text/css">
			table tr th {
				background: #f7f7f7;
			}

			table,
			table tr th,
			table tr td {
				border: 1px solid #eaeaea;
			}

			table {
				min-width: 200px;
				min-height: 25px;
				line-height: 25px;
				text-align: center;
				border-collapse: collapse;
			}
		</style>
	</head>
	<body>
		<div id="book">
			{{ message }}
			<table>
				<tr>
					<!-- <th>序号</th> -->
					<th v-for="th in tableTh">
						{{th.title}}
					</th>
				</tr>
				<tbody id="body">
					<tr v-for="(tr,index) in bookList" :key="tr.id" v-on:click="select(index)">
						<!-- <td>{{index+1}}</td> -->
						<td><input type="radio" :checked="tr.isChecked"></td>
						<td>{{tr.id}}</td>
						<td>{{tr.name}}</td>
						<td>{{tr.date}}</td>
						<td>{{formatprice(tr.price)}}</td>
						<td>
							<button-reduce :list="tr" :index="index"></button-reduce> {{tr.num}}
							<button-add :list="tr"></button-add>
						</td>
						<td>
							<button-remove :index="index"></button-remove>
						</td>
					</tr>
				</tbody>


			</table>
			<h3>总价格： {{formatprice(totalSumAll)}}</h3>
		</div>
		<!-- js最后引入-->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var book = new Vue({
				el: '#book',
				data: {
					message: '书籍',
					num1: 1,
					orderBy: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"], //可以控制字段的先后顺序，想调整列的先后顺序，改这个数组就行，可以做个性化设置
					tableTh: { //表头的描述信息
						t1: {
							title: "", //还可以增加其他描述，比如width等
							align: "left"
						},
						t2: {
							title: "ID", //还可以增加其他描述，比如width等
							align: "right"
						},
						t3: {
							title: "书籍名称",
							align: "right"
						},
						t4: {
							title: "出版日期",
							align: "right"
						},
						t5: {
							title: "价格",
							align: "right"
						},
						t6: {
							title: "购买数量",
							align: "right"
						},
						t7: {
							title: "操作",
							align: "right"
						}
					},

					bookList: [{
							isChecked: false,
							id: 1,
							date: '2010-10',
							price: 98,
							num: 1,
							name: 'JAVA',
						},
						{
							isChecked: false,
							id: 2,
							date: '2011-10',
							price: 100,
							num: 1,
							name: 'PYTHON',
						},
						{
							isChecked: false,
							id: 3,
							date: '2012-10',
							price: 111,
							num: 1,
							name: 'PHP',
						},
						{
							isChecked: false,
							id: 4,
							date: '2013-10',
							price: 222,
							num: 1,
							name: '什么',
						}
					],

				},
				methods: {
					// reduce: function(item,index) {
					// 	console.log(item,index);
					// 	item.num --;
					// 	if(item.num==0){
					// 		this.bookList.splice(index, 1);
					// 	}


					// },
					// add: function(item) {
					// 	console.log(item);
					// 	item.num ++;
					// },
					select: function(index) {
						console.log("index:" + index);
						if (this.bookList[index] != null) {
							if (this.bookList[index].isChecked)
								return this.bookList[index].isChecked = false;
							return this.bookList[index].isChecked = true;
						}

					}

				},
				components: {
					'button-remove': {
						props: ['index'],
						template: `
						<button v-on:click="remove(index)" >移除</button>
						`,
						methods: {
							remove: function(index) {
								console.log("index:::" + index);
								this.$root.bookList.splice(index, 1);
							}

						},
					},
					'button-reduce': {
						props: ['list', 'index'],
						template: `
						<button v-on:click="reduce(list,index)" :disabled="list.num <1">-</button>
						`,
						methods: {
							reduce: function(item, index) {
								console.log(item, index);
								item.num--;
								if (item.num == 0) {
									this.$root.bookList.splice(index, 1);
								}
							}
						},
					},
					'button-add': {
						props: ['list'],
						template: `
						<button v-on:click="add(list)">+</button>
						`,
						methods: {
							add: function(item) {
								console.log(item);
								item.num++;
							},
						},
					}
				},


				computed: {
					// 计算总价格,方法1
					totalSumAll() {
						let totalSumAll = 0;
						this.bookList.forEach((item) => {
							totalSumAll += item.price * item.num
						});
						return totalSumAll
					},
					// 计算总价格,方法2
					totalSumAll2() {
						return this.bookList.reduce((returnVal, nextItem) => returnVal + nextItem.price * nextItem.num, 0);
					},
					// 给价格增加两个小数点,方法1
					formatprice: function() {
						return function(price) {
							return "¥" + price.toFixed(2);
						}
					},
					// 给价格增加两个小数点,方法2，简写
					// formatprice:function(){
					// 	return price=>"¥"+price.toFixed(2);
					// },



				},
				// 给价格增加两个小数点,方法3，过滤,注意filters与computed同级
				// filters: {
				//   formatprice:price=>"¥"+price.toFixed(2)
				// }


			})
		</script>
		<!-- 高亮js -->
		<script type="text/javascript">
			var tbody = document.getElementById('body'); //tbody节点
			for (var i = 0; i < tbody.children.length; i++) {
				tbody.children[i].style.backgroundColor = '#ffffff';
				//实现鼠标移入高亮
				tbody.children[i].onmouseenter = function() {
					this.style.backgroundColor = '#f7f7f7';

				}
				tbody.children[i].onmouseleave = function() {
					this.style.backgroundColor = '#ffffff';
				}
			}
		</script>
	</body>
</html>
